<template>
  <div class="wk_administration" id="wk_administration">
    <div class="left-boxw">
      <div class="page-body">
        <a-form
          layout="inline"
          :form="form"
          @submit="handleSubmit"
          v-if="!show"
        >
          <div class="page-header">
            <span class="title-item" style="margin-left: -19px"
              >运维事件管理</span
            >
          </div>
          <a-row>
            <a-form-item class="form-item" label="事件名称" labelAlign="right">
              <a-input
                class="inline-input"
                autocomplete="off"
                v-model="form.name"
              ></a-input>
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item class="form-item" label="事件类型" labelAlign="right">
              <a-select
                class="select-item"
                @change="selectArea"
                 placeholder="请选择事件类型"
                 style="width: 363px"
              >
                 <a-select-option
                v-for="(item, index) in list"
                :key="index"
                :value="item.id"
                >{{ item. eventType}}</a-select-option
              >
              </a-select>
            </a-form-item>
          </a-row>
          <a-row>
            <a-col class="submit-box">
              <a-button
                type="primary"
                style="margin-right: 15px"
                @click="showCont"
                >搜索</a-button
              >
              <a-button type="reset" class="sdefault-btn" @click="clearConditions">清空条件</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div v-if="isList">
        <div class="page-header">
          <span class="title-item" style="margin-left: -21px"
            >运维计划制定</span
          >
          <span
            class="backItem"
            style="float: right; margin-right: 16px"
            v-if="isList"
            @click="backForm"
          >
            <a-icon type="rollback" />
          </span>
        </div>
        <div style="height: 750px; width: 100%; position: relative">
          <div class="waterfall-wrapper">
            <div
              v-for="(item, index) in list"
              :key="index"
              @click="selectFn(item)"
              :class="index == isSelect ? 'select-box' : 'wk_a'"
            >
              <div class="Repair_Box">
                <div class="Repair_ico">
                  <img
                    v-if="isSelect == index"
                    src="../../../../assets/public/运维事件1.png"
                    alt
                  />
                  <img
                    v-else-if="isSelect != index"
                    src="../../../../assets/public/运维事件2.png"
                    alt
                  />
                </div>
                <div class="Repair_im">
                  <span style="color: #37ddc0; font-size: 13px">{{
                    item.eventAddress
                  }}</span>
                  <p style="font-size: 12px; color: #94a19e">
                    {{ item.eventContent }}
                  </p>
                </div>
                <div
                  class="Repair_date"
                  style="color: #8aa945; font-size: 16px"
                >
                  <p style="font-size: 15px">{{ item.creatTime }}</p>
                  <p>{{ item.eventType }}</p>
                  <p>{{ item.userId }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="page-box">
            <a-pagination
              :show-total="(total) => `共 ${total}条记录`"
              v-model="form.current"
              :total="total"
              :defaultPageSize="form.size"
              :item-render="itemRender"
              size="small"
              @change="pagechangeFn"
              show-less-items
            />
          </div>
        </div>
      </div>
    </div>
    <div class="right-map">
      <div style="height: 100%">
        <el-amap class="amap-box" :amap-manager="amapManager" :events="events" :zoom="zoom" :vid="'amap-vue'"></el-amap>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";

let amapManager = new AMapManager(); // 新建生成地图画布
export default {
  name: "index",
  name: "a-map",
  data() {
    let self = this;
    return {
      form: this.$form.createForm(this, {
        name: "horizontal_login",
      }),
      list: [], //展示数据
      moment,
      show: false,
      isList: false,
      data: [],
      form: {
        current: 1,
        size: 5,
        name: "",
        regionId: "",
        userId: "",
        eventType: "",
      },
      dataList: [], // 查询出来的数组
      details: {}, //  选中的数据对象
      total: 0,
      amapManager,
      mapStyle: "amap://styles/39ba2088b6b8fc67184833f73cceab4d",
      zoom: 10,
      map: "",
      isSelect: "",
      events: {
        init(o) {
          lazyAMapApiLoaderInstance.load().then(() => {
            self.initPage();
          });
        },
      },
      markerArr: [], // 点标记数组
      clickedMarker: "",
    };
  },
  methods: {
    //区域监听
    selectArea(value) {
      this.form.id = value;
      console.log(vlaue);
    },
    //清空条件
    clearConditions() {
      this.form = {
        name: "",
        eventType: "",
      };
    },
    // 初始化地图点标记
    markerList() {
      this.map.remove(this.markerArr);
      this.markerArr = [];
      this.list.forEach((item) => {
        console.log(item);
        let icon = new AMap.Icon({
          size: new AMap.Size(28, 30),
          image: require("@/assets/public/运维计划2.png"),
          imageSize: new AMap.Size(28, 30),
          imageOffset: new AMap.Pixel(0, 0),
        });
        let marker = new AMap.Marker({
          position: new AMap.LngLat(item.x, item.y),
          icon: icon,
        });
        marker.setExtData({ id: item.id });
        AMap.event.addListener(marker, "click", (e) => {
          this.selectFn(item);
          this.openinfoWindow(item);
          this.clickedMarker = e.target;
        });
        this.markerArr.push(marker);
      });
      this.map.add(this.markerArr);
      this.map.setFitView();
    },
    // 点击设备方法
    selectFn(item) {
      this.isSelect = item.id;
      this.markerArr.forEach((item) => {
        if (item.getExtData().id == this.isSelect) {
          if (this.clickedMarker) {
            this.clickedMarker.setIcon(
              new AMap.Icon({
                size: new AMap.Size(80, 80),
                image: require("@/assets/public/运维事件4.png"),
                imageSize: new AMap.Size(40, 40),
                imageOffset: new AMap.Pixel(20, 20),
              })
            );
          }
          item.setIcon(
            new AMap.Icon({
              size: new AMap.Size(80, 80),
              image: require("@/assets/public/运维事件3.png"),
              imageSize: new AMap.Size(60, 60),
              imageOffset: new AMap.Pixel(10, 10),
            })
          );
          this.clickedMarker = item;
          this.map.setCenter(item.getPosition());
        }
      });
      this.openinfoWindow(data);
      this.details = data;
    },
    //跳转页面
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // console.log("Received values of form: ", values);
        }
      });
    },
    onTouruChange(e) {
      console.log("current", e);
    },
    //获取数据
    showCont() {
      if (this.show == false) {
        this.show = !this.show;
        this.isList = !this.isList;
      }
      this.$api.event_findByPage(this.form).then((res) => {
        var data = res.data.data;
        this.list = data;
        this.total = res.data.total;
        this.form.name = "";
        this.form.eventType = "";
        this.markerList();
      });
    },
    backForm: function () {
      this.show = !this.show;
      this.isList = !this.isList;
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a> 上一页 </a>;
      } else if (type === "next") {
        return <a> 下一页 </a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.form.current = page;
      this.showCont();
    },
    // 初始化地图
    initPage() {
      this.map = this.amapManager.getMap();
      this.map.plugin(["AMap.MouseTool"], () => {
        this.mouseTool = new AMap.MouseTool(this.map);
      });
      this.mouseTool.on("draw", (data) => {
        let coordinate = data.obj.getPath();
        let str = "MULTIPOLYGON(((";
        coordinate.forEach((item) => {
          str += item.R + " " + item.Q + ",";
        });
        str += coordinate[0].R + " " + coordinate[0].Q + ")))";
        this.queryForm.geom = str;
        this.mouseTool.close();
        // MULTIPOLYGON(((120.074503 30.378658,119.989702 30.378658,119.989702 30.319403,120.074503 30.319403,120.074503 30.378658)))
      });
    },
    //渲染多点
    markerListA() {
      if (!this.isSupportCanvas()) {
        alert(
          "热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~"
        );
      }
      //每次进来清楚marker
      this.map.clearMap();
      this.dataList.forEach((v) => {
        //创建ICON图标
        let icon = new AMap.Icon({
          size: new AMap.Size(80, 80),
          image: require("@/assets/public/运维事件4.png"),
          imageSize: new AMap.Size(40, 40),
          imageOffset: new AMap.Pixel(20, 20),
        });
        let marker = new AMap.Marker({
          position: new AMap.LngLat(v.x, v.y),
          icon: icon,
          title: v.title,
          offset: new AMap.Pixel(-40, -40),
        });
        marker.setExtData({ id: v.id });
        marker.on("click", (e) => {
          this.selectFn(v);
          this.clickedMarker = e.target;
        });
        this.markerArr.push(marker);
      });
      this.map.add(this.markerArr);
      this.map.plugin(["AMap.Heatmap"], () => {
        let heatmap = new AMap.Heatmap(this.map, {
          //visible:true,         //visible 热力图是否显示,默认为true
          //backgroundColor:rgba(0,102,256,0.2),          //画板的背景颜色设置，支持rgb(a)，颜色名称，但必须要用引号
          radius: 100, //热力图的每个点的半径大小   [0,+∞)
          opacity: [0.5, 1], //热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
          gradient: {
            //热力图的颜色渐变区间。   {JSON}:key 插值的位置, 0-1;  value颜色值
            0.5: "#395030",
            0.65: "#575b29",
            0.7: "#58572b",
            0.9: "#594a29",
            1.0: "#574129",
          },
        });
        heatmap.setDataSet({
          data: this.dataList,
          max: 10,
        });
      });
    },
    isSupportCanvas() {
      var elem = document.createElement("canvas");
      return !!(elem.getContext && elem.getContext("2d"));
    },
    // 创建标签方法
    // createInfoWindow() {
    //   this.isinfoWindow = true;
    //   return this.$refs.infoWindow;
    // },
    // 打开标签方法
    // openinfoWindow(data) {
    //   var position = new AMap.LngLat(
    //     data.taskEquipmentInfoPoList.x,
    //     data.taskEquipmentInfoPoList.y
    //   );
    //   this.map.panTo(position);
    //   this.infoWindow.setContent(this.createInfoWindow());
    //   this.infoWindow.open(this.map, position);
    // },
  },
  //把全局的背景图片取消
  mounted() {
    document
      .querySelector(".layout-content-main")
      .classList.add("none-background");
    this.showCont();//查询数据
  },
  beforeRouteLeave(to, from, next) {
    document
      .querySelector(".layout-content-main")
      .classList.remove("none-background");
    next();
  },
};
</script>
<style>
#wk_administration .list-tr .thead-item {
  width: 12%;
}
/* Form表单label */
#wk_administration .ant-form-item-label > label::after {
  content: "";
}
</style>
<style scoped>
.select-box {
  background: linear-gradient(#1e7151, #246369);
  background-color: rgba(31, 111, 82);
  border-radius: 9px;
}
.wk_a {
  background-color: rgba(26, 55, 50);
  border-radius: 9px;
}
.waterfall-wrapper {
  width: 95%;
  margin-left: 12px;
  margin-top: 12px;
  height: 95%;
}
.left-boxw {
  width: 32.4%;
  display: inline-block;
  margin: 13px 0px 0px -10px;
  background-image: url(../../../../assets/public/小窗口1.png);
  color: #fff;
  min-height: 510px;
  border-right: 2px solid #119a83;
  border-bottom: 2px solid #119a83;
  border-left: 10px solid #119a83;
  min-height: 815px;
}
</style>
<style scoped src="../../../../assets/style/pollution.css"></style>
<style scoped src="../../../../assets/style/pollution/exhaust.css"></style>
<style scoped lang="scss">
.wk_administration {
  height: 100%;
}
.left-boxw {
  height: 95%;
}
.right-map {
  height: 95%;
}
//运维事件管理

.Repair_Box {
  display: flex;
  padding: 5px 15px;
  cursor: pointer;

  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 20px;
  border: 1px;
  margin: 10px;

  .Repair_ico {
    width: 15%;
    height: 70%;
    padding-top: 15px;
  }
  .Repair_im {
    height: 70%;
    width: 50%;
  }
  .Repair_date {
    height: 70%;
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
}

::v-deep .ant-form-item-label label {
  color: #9fb043;
  font-size: 18px;
}

::v-deep .ant-form-item-children input {
  background-color: #29423f;
  border: none;
  color: #bebebe;
}

::v-deep .ant-btn:hover,
::v-deep .ant-btn:focus,
::v-deep .ant-btn:active,
::v-deep .ant-btn.active {
  text-decoration: none;
  background: #37ddc0;
}

::v-deep .ant-form-item {
  margin-right: 0px;
  width: 100%;
}

::v-deep .ant-form-item-label {
  width: 22%;
}

::v-deep .ant-form-item-control-wrapper {
  width: 78%;
}

::v-deep .ant-row {
  margin-bottom: 6px;
}

::v-deep .layout-content-main {
  background: none;
}

::v-deep .ant-pagination-item,
::v-deep .ant-select-selection {
  background-color: #1e3230;
  border: none;
}

::v-deep .ant-pagination-item a,
::v-deep .ant-select-arrow,
::v-deep .ant-select-selection__rendered {
  color: #bebebe;
}

::v-deep .ant-pagination-prev .ant-pagination-item-link,
::v-deep .ant-pagination-next .ant-pagination-item-link {
  background-color: #1e3230;
  border: none;
  color: #bebebe;
}

::v-deep .ant-pagination-total-text {
  color: #bebebe;
}

::v-deep .waterfall-wrapper {
  overflow: hidden;
}
::v-deep .ant-pagination {
  margin-left: 280px;
}
::v-deep .scroll {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 2rem; //预留foot组件
  overflow: hidden;
}

.amap-box {
  width: 100%;
  height: 100%;
}
</style>
